<template>
  <d2-container class="tasklist">
    <template slot="header">财务明细</template>
    <div style="display:flex;flex-direction: column;">
      <div style="display:flex;margin-top:20px;margin-bottom:20px;">
        <el-input v-model="user" style="width:200px;margin-left:10px;" placeholder="请输入用户名"></el-input>
        <el-input v-model="content" style="width:200px;margin-left:10px;" placeholder="请输入内容"></el-input>
        <el-button type="primary" style="margin-left:10px;" @click="creates()">添加</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;overflow-y: scroll;">
      <el-table-column
        prop="id"
        align="center"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="username"
        align="center"
        label="用户">
      </el-table-column>
      <el-table-column
        prop="content"
        align="center"
        label="内容">
      </el-table-column>
      <el-table-column
        prop="create_time"
        align="center"
        label="创建时间">
        <template slot-scope="scope">
            {{scope.row.create_time*1000 | moment}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="修改">
        <template slot-scope="scope">
            <el-button type="primary" @click="dialogVisible = true;ruleForm=scope.row;">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="Number(count)">
    </el-pagination>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%">
      <el-form :model="ruleForm" status-icon ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="用户名" prop="checkPass">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="age">
          <el-input v-model="ruleForm.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updates()">确 定</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {create, update, select} from "@/api/sys.login";
  export default {
    name: "AccountDetails",
    data() {
      return {
        user:"",
        dialogVisible:false,
        tableData:[],
        ruleForm:{
            id:"",
            username:"",
            content:""
        },
        content:"",
        page:1,
        pagesize:10,
        count:'',
        row:{},
      }
    },
    methods: {
      handleCurrentChange(val){
          this.page = val
          this.selects()
      },
      //添加
      creates(){
        create(this.user,this.content).then((res)=>{
          console.log(res);
          this.selects()
        })
      },
      //修改
      updates(){
        update(this.ruleForm.id,this.ruleForm.username,this.ruleForm.content).then((res)=>{
          this.dialogVisible = false
        })
      },
      //列表
      selects(){
        select(this.page,this.pagesize).then((res)=>{
         this.tableData = res.data
          this.count = res.count
        })
      }
    },
    created() {
      this.selects()
    }
  }
</script>

<style>

</style>
